<template>
  <div class="settings-drawer">
    <n-drawer
      v-model:show="show"
      :width="500"
      placement="right"
      display-directive="show"
    >
      <n-drawer-content title="主题配置">
        <n-scrollbar class="h-full">
          <LayoutSettings />
        </n-scrollbar>
      </n-drawer-content>
    </n-drawer>

    <!-- 设置按钮 -->
    <div class="settings-btn" @click="show = true">
      <n-button circle size="large" type="primary">
        <template #icon>
          <n-icon><SettingIcon /></n-icon>
        </template>
      </n-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import LayoutSettings from "./LayoutSettings.vue";
import { SettingIcon } from "@/components/Icon";

const show = ref(false);

defineExpose({
  open: () => {
    show.value = true;
  },
});
</script>

<style scoped>
.settings-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
}

.settings-btn :deep(.n-button) {
  width: 48px;
  height: 48px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.settings-btn :deep(.n-button:hover) {
  transform: rotate(90deg);
  transition: transform 0.3s;
}

.settings-btn :deep(.n-button-icon) {
  font-size: 24px;
}

/* 暗色主题样式 */
:deep(.dark) .settings-btn .n-button {
  box-shadow: 0 2px 12px 0 rgba(255, 255, 255, 0.1);
}
</style>
